<template>
  <div>
    <!-- 请选择客户 -->
    <el-dialog
      :title="$t('customer.edit.customerDialog.title')"
      :visible.sync="isClose"
      width="40%"
      @close="GroupClosed"
    >
      <el-form
        :model="GroupForm"
        ref="Group"
        
        label-position="top"
      >
        <el-form-item :label="$t('common.placeholder.select')">
          <el-select
            id="GroupSelect"
            style="width: 100%"
            v-model="GroupForm.id"
            v-loadmore="Paging"
            :placeholder="$t('common.placeholder.select')"
            filterable
            remote
            clearable
            :loading="loading"
            :remote-method="remoteMethod"
          >
            <el-option
              style="height: auto; padding: 0"
              v-for="i in CustomerList"
              :key="i.id"
              :label="i.name"
              :value="i.id"
            >
              <div class="options">
                <div class="options-icon">
                  <svg
                    t="1628839961821"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="23540"
                    width="32"
                    height="32"
                  >
                    <path
                      d="M530.4 572.2c-82.6 22.5-172.9 93.3-172.9 162.3v88.3H124.3c-14.3 0-25.9-11.6-25.9-25.9v-60.5c0-114.8 228.4-172.7 342.8-172.7 25.4-0.1 56.4 2.8 89.2 8.5z m-172.9-60.4c-85.9 0-155.5-69.6-155.5-155.5s69.6-155.5 155.5-155.5S513 270.4 513 356.3s-69.6 155.5-155.5 155.5z m342.9 51.8c66.9-1.7 123-56.7 126.1-123.5 3.3-73-54.1-134.1-126.8-135.5h-5.2c-71.5 1.4-128.4 60.6-127 132.1 1.4 71.5 60.6 128.7 132.9 126.9z m-6 51.9c-77.8 0-233.2 46.3-233.2 138.2v43.2c0 14.3 11.6 25.9 25.9 25.9h414.6c14.3 0 25.9-11.6 25.9-25.9v-43.2c0-92-155.4-138.2-233.2-138.2z"
                      p-id="23541"
                      fill="#ffffff"
                    ></path>
                  </svg>
                </div>
                <div class="options-content">
                  <span class="options-content-name">{{ i.name }}</span>
                  <span class="options-content-Number">{{ i.lmPhone }}</span>
                </div>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="GroupClosed">{{$t('common.base.cancel')}}</el-button>
        <el-button @click="SaveGroup" type="primary"> {{$t('common.base.confirm')}} </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
/* api */
import { CustomerList } from "@src/api/CustomerApi.ts";
export default {
  props: {
    isClose: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isGroup: true,
      GroupForm: {
        id: "",
      },
      CustomerList: [],
      params:{
        keyword: "",
        pageNum: 1,
        pageSize: 50
      },
      loading:false,
      timeout:null
    };
  },
  methods: {
    remoteMethod(item){
      this.params.keyword=item
      this.params.pageNum=1
      if(this.timeout !== null) clearTimeout(this.timeout)     
      this.timeout = setTimeout(this.CustomerApi, 500);
    },
    GroupClosed() {
      this.$emit("CustomerClose");
    },
    SaveGroup() {
      if (!this.GroupForm.id) return;
      let info = this.CustomerList.find(
        (item) => item.id === this.GroupForm.id
      );
      this.$emit("CustomerClose", info);
    },
    CustomerApi() {
      CustomerList(this.params).then((res) => {
        this.CustomerList = res.list
      });
    },
    Paging(){
      this.params.pageNum+=1
      CustomerList(this.params).then((res) => {
        this.CustomerList = this.CustomerList.concat(res.list)
      });
    }
  },
  mounted() {
    this.CustomerApi();

  },
  directives:{
    loadmore:{
       bind(el, binding, vnode) {
        const SELECTWRAP = el.querySelector(
            ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP.addEventListener("scroll", function () {
            const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
            if (CONDITION) {
                binding.value();
            }
        });
      }
    }
  }
};
</script>
<style scoped lang="scss">
.options {
  width: 100%;
  height: 52px;
  display: flex;
  box-sizing: border-box;
  transition: background 0.5s;
  align-items: center;
  padding: 0 19px;
  .options-icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    border-radius: 50%;
    background: $color-primary-light-6;
  }
  .options-content {
    height: 100%;
    .options-content-name {
      height: 50%;
      display: flex;
      font-size: 14px;
      font-weight: 400;
      color: #595959;
    }
    .options-content-Number {
      height: 50%;
      display: flex;
      font-size: 12px;
      font-weight: 400;
      color: #8c8c8c;
    }
  }
}
.options:hover {
  background: $color-primary-light-1;
}
</style>